const button = document.getElementById("button");
const toasts = document.getElementById("toasts");

const messages = [
  "Message One",
  "Message Two",
  "Message Three",
  "Message Four",
];

const types = ["info", "success", "error"];

button.addEventListener("click", () => createNotification());

function createNotification(message = null, type = null) {
  // 2. 每次点击按钮, 创建出一个新节点div
  const notif = document.createElement("div");
  notif.classList.add("toast"); // 2.1 添加上对应“类名” (主要用于配合“主容器”, 进行一同显示内容)
  notif.classList.add(type ? type : getRandomType()); // 2.2 随机出现对应type颜色

  notif.innerText = message ? message : getRandomMessage(); // 2.3 随机出现文字

  toasts.appendChild(notif); // 2.4 往对应<容器盒子>上添加[当前要显示的节点]

  // 2.5 经过 3s 销毁节点
  setTimeout(() => {
    notif.remove();
  }, 3000);
}

// 2.3同步 ->随机出现的文字:
function getRandomMessage() {
  return messages[Math.floor(Math.random() * messages.length)];
}

// 2.2同步 ->随机出现的type颜色:
function getRandomType() {
  return types[Math.floor(Math.random() * types.length)];
}
